<!doctype html>
<!--
// Copyright 2012 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<html>
<head>
  <meta charset="utf-8">
  <title>Moog JS Demo</title>
  <style type="text/css">
    #keyboard > button {
      background-color: #eee;
      border: 2px solid black;
      cursor: pointer;
      font-weight: bold;
      height: 50px;
      width: 50px;
    }
  </style>
</head>
<body>

<h1>Moog Doodle Demo Page</h1>
To get this running:
<ul>
  <li>If you got this code by:
    <ul>
    <li>tarball/zip, then download
        <a href="http://code.google.com/p/closure-library/source/browse/#svn%2Ftrunk">Closure
      Library</a> to a folder named 'closure' in this directory.</li>
    <li>git clone, then run
        <code>git submodule init && git submodule update</code></li>
    </ul>
  </li>
  <li>Make sure volume is unmuted, speakers are on, etc.</li>
  <li>Open this file in a Web Audio enabled browser like Chrome.</li>
  <li>Press the buttons below to play tones.</li>
</ul>

<h2>Keys</h2>
<div id=keyboard>
  <button>0</button>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

<h2>Cutoff Frequency</h2>
<input id=cutoff type=range min=20 max=5000 value=2100 style=width:500px>

<script src="closure/closure/goog/base.js"></script>
<script src="closure/closure/goog/deps.js"></script>
<script src="deps.js"></script>
<script>
goog.require('doodle.moog.Moog');

window.onload = function() {
  var moog = new doodle.moog.Moog();
  moog.turnOnAudio();

  var keyboard = document.getElementById('keyboard');
  keyboard.addEventListener('mousedown', function(e) {
    if (e.target.tagName == 'BUTTON') {
      moog.synthesizers_[0].setKeyDown(parseInt(e.target.innerHTML, 10));
    }
  }, false);
  keyboard.addEventListener('mouseup', function(e) {
    moog.synthesizers_[0].setKeyUp();
  }, false);
  keyboard.addEventListener('mouseout', function(e) {
    moog.synthesizers_[0].setKeyUp();
  }, false);

  var cutoff = document.getElementById('cutoff');
  cutoff.addEventListener('change', function() {
    moog.synthesizers_[0].lowPassFilter.setCutoffFrequency(cutoff.value);
  }, false);
};
</script>

</body>
</html>
